import TablePlus from '../components/TablePlus'
import type { ColumnPlusType } from '../components/TablePlus/types'
import { ExportOutlined, DeleteOutlined } from '@ant-design/icons';
import { Button, Tag } from 'antd'

interface User {
    name: string
    email: string
    phone: string
    type: { name: string }
    roles: { id: string | number; name: string }[]
}

const columns: ColumnPlusType<User>[] = [
    {
        dataIndex: 'name',
        title: '名称',
        key: 'name',
    },
    {
        dataIndex: 'email',
        title: '邮箱',
        key: 'email',
        align: 'center',
    },
    {
        dataIndex: 'phone',
        title: '联系方式',
        key: 'phone',
        align: 'center'
    },
    {
        dataIndex: 'type',
        title: '人员类型',
        key: 'type',
        render: (type) => type.name
    },
    {
        dataIndex: 'roles',
        title: '角色',
        key: 'roles',
        render: (roles) => (
            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                {roles.map((item: any) => (
                    <Tag key={item.id} style={{ marginRight: 8 }}>{item.name}</Tag>
                ))}
            </div>
        )
    },
    {
        dataIndex: 'operation',
        title: '操作',
        key: 'operation',
        width: 200,
        fixed: 'right',
        align: 'center',
        operations: [
            {
                key: 'edit',
                label: '编辑',
                buttonProps: {
                    style: {
                        color: 'orange'
                    }
                },
                show: (record)=>{
                    //如果角色是超级管理员 不可以被人编辑
                    const isAdmin = record.roles.find((role:any) => role.name === '超级管理员');
                    return !isAdmin;
                }
            },
        ],
        render:(_:any,record:User,index:number)=>{
            return <>
                <a onClick={() => { console.log('查看', record) }}>查看</a>
            </>
        },
        operateClick: (key: string, record: User) => {
            console.log(key, record)
        }
    }
]

const fetchData = async (params: Record<string, any>) => {
    const { page = 1, pageSize = 10, keyword = '' } = params;
    
    // 模拟延迟
    await new Promise(resolve => setTimeout(resolve, 500));
    
    // 创建模拟数据
    const mockUsers: User[] = Array.from({ length: 100 }, (_, index) => ({
        name: `用户${index + 1}${keyword ? `-${keyword}` : ''}`,
        email: `user${index + 1}@example.com`,
        phone: `1${Math.floor(Math.random() * 10000000000).toString().padStart(10, '0')}`,
        type: { name: index % 3 === 0 ? '管理员' : index % 3 === 1 ? '普通用户' : '访客' },
        roles: [
            { id: index, name: index % 4 === 0 ? '超级管理员' : index % 4 === 1 ? '编辑' : index % 4 === 2 ? '审核员' : '查看者' },
            ...(index % 3 === 0 ? [{ id: `extra-${index}`, name: '特殊角色' }] : [])
        ]
    }));
    
    // 模拟搜索过滤
    let filteredData = [...mockUsers];
    if (keyword) {
        filteredData = filteredData.filter(user => 
            user.name.includes(keyword) || 
            user.email.includes(keyword) || 
            user.phone.includes(keyword)
        );
    }
    
    // 分页处理
    const startIndex = (page - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const paginatedData = filteredData.slice(startIndex, endIndex);
    
    // 添加操作按钮
    const result = paginatedData.map(item => {
        return {
            ...item,
            actions: [
                { key: 'edit2', label: '接口返回'},
            ]
        };
    });
    
    // 返回模拟响应
    return {
        data: result as User[],
        total: filteredData.length,
        success: true
    };
};

const TablePlusDemo = () => (
    <div style={{ padding: 24, background: '#fff' }}>
        <TablePlus 
        toolBarRender={()=>{
            return <Button type='primary'>自定义Tool</Button>
        }} 
        options={{
            print:{
                show:true,
                onClick:()=>{
                    console.log("print");
                }
            },
            outPut:{
                show:true,
                onClick:()=>{
                    console.log("outPut");
                }
            },
            batch: {
                onClick: (rows, key) => {
                    console.log("最外边的Rows》》", rows);
                    console.log("最外边的key》》", key);
                },
                dropDownOptions: [
                    {
                        label: '批量删除2',
                        key: 'batchDelete',
                        icon: <DeleteOutlined />
                    },
                    {
                        label: '批量导出',
                        key: 'batchOutput',
                        icon: <ExportOutlined />
                    }
                ]
            }
        }} pagination={{ pageSize: 10 }} columns={columns} request={fetchData} />
    </div>
)

export default TablePlusDemo